﻿@{
    ViewBag.Title = "GMapsPolygonTest";
	

	string zipcode = (string)ViewBag.zipcode;
	List<List<InfoSource.Models.objects.LatLong>> coordinates = (List<List<InfoSource.Models.objects.LatLong>>)ViewBag.coordinates;
}



<style type="text/css">
	#map-canvas
	{
		width: 1000px;
		height: 500px;
	}
</style>




<h2>GMapsPolygonTest: @zipcode</h2>
<input id="txtSearch" /><button id="btnSearch">Search</button>
<div id="map-canvas"></div>


<div>sets: @coordinates.Count</div>
<ul>

	@for (int x = 0;x < coordinates.Count; x++)
	{
		List<InfoSource.Models.objects.LatLong> set = coordinates[x];
	 
		<li>
			<div>set: @(x+1)</div>
			<ul>
				@foreach (InfoSource.Models.objects.LatLong latLng in set)
				{
					<li>
						<div>Lat: @latLng.Lat</div>
						<div>Lng: @latLng.Lng</div>
						<hr />
					</li>
				}
			</ul>
			<hr />
		</li>
	}
</ul>


<script type="text/javascript">

	var map;
	var zipCodePoly;

	function initialize() {
		var myLatLng = new google.maps.LatLng(@coordinates[0][0].Lat, @coordinates[0][0].Lng );
		var mapOptions = {
			zoom: 9,
			center: myLatLng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		map = new google.maps.Map(document.getElementById("map-canvas"),
		mapOptions);

		var zipCoords = [];
		@foreach (InfoSource.Models.objects.LatLong latLng in coordinates[0])
		{
			<text>
				zipCoords.push( {Lat:@latLng.Lat, Lng:@latLng.Lng} );
			</text>
		}

		drawZipcodePolygon(zipCoords);

	}

	function drawZipcodePolygon(coordinates){
		
		var latLngs = [];
		for(var x=0;x<coordinates.length;x++){
			var curCoord = coordinates[x];

			latLngs.push(new google.maps.LatLng(curCoord.Lat, curCoord.Lng));
		}
		
		zipCodePoly = new google.maps.Polygon({
			paths: latLngs,
			strokeColor: "#FF0000",
			strokeOpacity: 0.8,
			strokeWeight: 2,
			fillColor: "#FF0000",
			fillOpacity: 0.35
		});

		zipCodePoly.setMap(map);
		map.panTo(latLngs[0]);

	}

	window.onload = function(){
		$("#btnSearch").on("click", function(){
			var zip = $("#txtSearch").val();

			if(zip == "") return;

			$.getJSON("/infosource/api/GetCoordinatesFromKMLFile?zipcode=" + zip, function(data){
				
				if(data != null && data != undefined && data.length > 0){
					zipCodePoly.setMap(null);
					drawZipcodePolygon(data[0]);
				}
			});
		});
	}

</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC_BeXNT_hWbHr5W0RmdQqjmdReGFMOlRk&sensor=false&callback=initialize"></script>



